<template>
	<view>
		<view class="container">
			<form @submit="Registration">
				<view class="title">
					<text>请您填写</text>
				</view>

				<view class="form">
					<view class="inputWrapper">
						<input class="input" v-model="userLogin.phone" type="text" value="" placeholder="手机号" />
					</view>
					<view class="inputWrapper">
						<input class="input" v-model="userLogin.password" type="text" value="" placeholder="密码" />
					</view>
					<view class="inputWrapper">
						<input class="input2" type="text" v-model="code" value="" maxlength="5" placeholder="验证码" />
						<view :class="[disabledCode==false?'onSendCode':'onSendCodeNo']" @tap="onSendCode">{{codeText}}</view>
					</view>
					<view class="inputWrapper">
						<input class="input" v-model="name" type="text" value="" placeholder="姓名" />
					</view>

					<view class="radio">
						<radio-group name="sex" @change="changeRadio" style="transform:scale(1.3)">
							<label>性别：</label>
							<label>
								<radio value="男" checked="checked" /><text>男</text>
								<radio value="女" /><text>女</text>
							</label>
						</radio-group>
					</view>

					<view class="inputWrapper">
						<!-- <view class="uni-list-cell-db"> -->
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<input class="input" v-model="date" type="text" value="" placeholder="出生日期" />
							<!-- <view class="uni-input">{{date}}</view> -->
						</picker>
						<!-- </view> -->
					</view>
					<view class="inputWrapper">
						<input class="input" v-model="address" type="text" value="" placeholder="居住地" />
					</view>
					<view class="inputWrapper">
						<input class="input" v-model="userLogin.email" type="text" value="" placeholder="电子邮箱" />
					</view>
					<!-- 		<view class="inputWrapper">
						<input class="input2" type="text" v-model="code" value="" maxlength="5" placeholder="验证码" />
						<view :class="[disabledCode==false?'onSendCode':'onSendCodeNo']" @tap="onSendCode">{{codeText}}</view>
					</view> -->

				</view>
				<button form-type="submit" class="loginBtn">注册</button>
			</form>

			<!-- <view class="privacy">
				<input type="checkbox" class="chec">
				阅读并同意<text>《用户协议》</text>及<text>《隐私政策》</text>
			</view> -->
			<view class="checkbox">
				<checkbox-group @change="checkboxChange">
					<checkbox :checked="checked" shape="circle" size="36" active-color="#CC0000">
						已阅读并同意
					</checkbox>
				</checkbox-group>
				<view @click="toDOcx">
					<text class="user">《用户服务协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			// const date = this.getDate({
			// 	format: true
			// })
			return {
				date: '出生日期', //出生日期
				checked: false,  //用户协议是否勾起
				code: null,
				codeText: '获取验证码',
				disabledCode: false,

				gouxSta: false,
				kind: '',
				name: "老王",
				// dob: '', //出生日期
				age: 76,
				sex: 1,
				address: "某某小区",

				userLogin: {
					userId: "",
					password: "123456",
					phone: "18575842773",
					email: "2689645568@qq.com",
					wechat: "",
					address: "某某小区",
				},
				oldster: {
					userId: "",
					homeId: "",
					communityId: "",
					// name: "老王",
					name: '',
					age: 76,
					sex: 1
				},
				younger: {
					userId: "",
					homeId: "",
					name: "小李",
					age: 20,
					sex: 1,
					priority: 0
				}


			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.kind = option.kind
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {

			//日期获取
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 130;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//传入时间计算年龄
			// 根据日期计算年龄
			getAge(date) {
				//strBirthday传入格式 2020-04-15
				var returnAge;
				var strBirthdayArr = date.split('-');
				var birthYear = strBirthdayArr[0];
				var birthMonth = strBirthdayArr[1];
				var birthDay = strBirthdayArr[2];
				//获取当前日期
				var d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1;
				var nowDay = d.getDate();
				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0岁
				} else {
					var ageDiff = nowYear - birthYear; //年之差
					if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
					}
				}
				return returnAge; //返回周岁年龄
			},

			//获取是否同意用户协议
			checkboxChange(e) {
				// console.log(this.checked);
				this.checked = !this.checked;
				console.log(this.checked);
			},

			moutcl() {
				if (this.gouxSta == false) {
					this.gouxSta = true
				} else {
					this.gouxSta = false
				}
			},

			//性别
			changeRadio(e) {
				// console.log(e.detail.value);
				this.oldster.sex = e.detail.value;
				// console.log(this.radioValue);
			},

			//注册
			Registration() {
				//内容判断
				// console.log(this.userLogin.phone);
				var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/; //手机号码
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; //邮箱
				if (this.userLogin.phone == '' || this.userLogin.password == '' || this.userLogin.email == '' || this.userLogin.address ==
					'' || this.name == '' || this.code == null) {
					uni.$showMsg('信息填写不完整！');
				} else if (!regex.test(this.userLogin.phone)) {
					uni.$showMsg('手机号格式错误');
				} else if (!reg.test(this.userLogin.email)) {
					uni.$showMsg('邮箱格式错误');
				} else if (this.date == '出生日期') {
					uni.$showMsg('请选择出生日期');
				} else if (this.code == null) {
					uni.$showMsg('验证码为空！');
				} else if (!this.checked) {
					uni.$showMsg('请阅读并同意《用户服务协议》');
				} else {
					//根据选择类型进行注册
					if (this.kind == 'older') {
						this.olderRegistration();
					} else if (this.kind == 'kid') {
						this.youngerRegistration();
					}
				}


			},

			//长辈注册

			olderRegistration() {
				this.oldster.age = this.getAge(this.date); //年龄赋值
				this.oldster.name = this.name;
				this.oldster.sex = this.sex;
				console.log(this.oldster);
				// let that = this;
				// this.changeRadio();
				// this.oldster.sex = event.detail;
				this.$request.post('Registration/Oldster', {
					userLogin: this.userLogin,
					oldster: this.oldster,
					code: this.code
				}).then(data => {
					console.log('data', data);
				})
				console.log("注册成功")
				uni.navigateTo({
					url: '../login/login?kind=' + this.kind
				})
			},


			//晚辈注册
			youngerRegistration() {
				this.younger.name = this.name;
				this.younger.age = this.age;
				this.younger.sex = this.sex;
				console.log(this.younger);
				this.$request.post('Registration/Younger', {
					userLogin: this.userLogin,
					younger: this.younger,
					code: this.code
				}).then(data => {
					console.log('data', data);
				})
				console.log("注册成功");
				uni.navigateTo({
					url: '../login/login?kind=' + this.kind
				})
			},

			//获取验证码
			onSendCode() {
				console.log('获取验证码');
				var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/; //手机号码
				// let phoneNum = this.userLogin.phone;
				if (regex.test(this.userLogin.phone)) {
					this.disabledCode = true;
					this.$request.post('Registration/GetCode', {
						phone: this.userLogin.phone,
					}).then(data => {
						console.log('data', data);
						let res = true;
						if (!res) {
							console.log('验证码获取失败')

						} else {
							let self = this
							// self.show = true;
							var time = 60;
							var timer = setInterval(fun, 1000);

							function fun() {
								time--;
								if (time >= 0) {
									self.codeText = time + "s";
								} else if (time < 0) {
									self.codeText = "获取验证码";
									self.disabledCode = false;
									clearInterval(timer);
									time = 60;
								}
							}
						}
					})
				} else {
					uni.$showMsg('手机号格式错误');
				}
			},
			toDOcx(){
				console.log('用户服务协议')
			}



		}
	}
</script>
<style>
	.container {
		/* background: #377EB4; */
		width: 100vw;
		height: 100vh;
	}

	.title {
		height: 10%;
		width: 80%;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 10%;
		font-size: 90rpx;
		font-weight: bold;
		position: relative;
		top: 5%;
	}

	.radio {
		width: 100%;
		height: 70%;
		padding: 30rpx 200rpx 10rpx 200rpx;
		margin: 0 auto;
	}

	/* 	.avator .img {
		height: 100%;
		width: 100%;
		max-width: 100%;
		max-height: 100%;
	} */

	.form {
		padding: 0 75rpx;
		margin-top: 30px;
	}

	.inputWrapper {
		/* display: flex; */
		
		width: 100%;
		height: 120upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh;
	}

	.inputWrapper .input {
		/* display: flex; */
		width: 100%;
		height: 100%;
		/* text-align: center; */
		text-indent: 10%;
		font-size: 50rpx;
		position: relative;
/* 		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh; */
	}

	.inputWrapper .input2 {
		width: 80%;
		height: 100%;
		/* text-align: center; */
		/* padding-left: 10%; */
		text-indent: 10%;
		font-size: 50rpx;
		position: relative;
		/* border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh; */
	}


	.loginBtn {
		width: 70%;
		height: 120upx;
		color: #FFFFFF;
		background: linear-gradient(#FEBC86, #F76D2E);
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		border-radius: 2vh;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.registration {
		width: 70%;
		height: 120upx;
		color: #E4A959;
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
		/* background: linear-gradient(#FEBC86,#F76D2E); */
		border: 5rpx solid #F0CDB1;
		border-radius: 2vh;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50px;
	}

	.registrationBtn {
		display: flex;
		margin-top: -50px;
	}


	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}

	.transfer {
		width: 100%;
		height: 10%;
		display: flex;
		margin-top: 10%;
		/* margin: 0 auto; */

		text-align: center;
	}

	.Registration {

		margin: 0 auto;

	}

	.loginSms {
		margin: 0 auto;
	}

	.onSendCode {
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
		height: 80upx;
		width: 28%;
		/* background-color: #007AFF; */
		color: #FFFFFF;
		background: linear-gradient(#FEBC86, #F76D2E);
		font-size: 35rpx;
		/* float: right; */
		position: absolute;
		text-align: center;
		line-height: 5vh;
		/* display: block; */
		top: 39vh;
		right: 16vw;
		border: 3rpx solid #F76D2E;
		border-radius: 4vh;

	}

	.onSendCodeNo {
		height: 80upx;
		width: 28%;
		/* background-color: #007AFF; */
		color: #FFFFFF;
		background: linear-gradient(#FEBC86, #F76D2E);
		font-size: 35rpx;
		/* float: right; */
		position: absolute;
		text-align: center;
		line-height: 5vh;
		/* display: block; */
		top: 40vh;
		right: 18vw;
		border: 3rpx solid #F76D2E;
		border-radius: 4vh;
		pointer-events: none; //禁用点击事件,节流
	}

	.privacy {
		/* display: flex; */
		width: 100%;
		height: 5%;
	}

	.privacy .text {
		color: #ff0000;

	}

	.checkbox {
		height: 5%;
		width: 92%;
		margin: 30rpx;
		font-size: 40rpx;
		display: flex;
		/* color: #FF0000; */
	}

	.user {
		color: #ff0000;
	}
</style>
